<template>
    <!-- 布局组件 -->
    <div class="container-group">
        <card-pane>
            <template v-slot:title>
                <span class="label">
                    <svg-icon
                        icon-class="font-layout-2-fill"
                        class="font-layout-2-fill"
                    />
                    <span class="text">布局组件</span>
                </span>
            </template>
            <template v-slot:list>
                <draggable
                    class="list-group"
                    :list="containerList"
                    :group="containerDraggable"
                    :sort="false"
                    :clone="hadnelCloneContainer"
                >
                    <transition-group>
                        <div
                            class="component-item"
                            v-for="item in containerList"
                            :key="item.key"
                        >
                            <svg-icon
                                :icon-class="item.icon"
                                :class="item.icon"
                            />
                            <span class="label">
                                {{ item.name }}
                            </span>
                        </div>
                    </transition-group>
                </draggable>
            </template>
        </card-pane>
    </div>
</template>
<script>
import { getUuid } from '@/utils/tool'
import CardPane from '../base/components/cardPane.vue'
export default {
    components: {
        CardPane
    },
    data() {
        return {
            // 选中的行
            activeRow: {},
            containerList: [
                {
                    type: 'row',
                    name: '行容器',
                    key: getUuid(),
                    icon: 'font-layout-row-fill',
                    value: []
                }
            ],
            // 表单拖拽配置项
            containerDraggable: {
                name: 'layoutComponent',
                pull: 'clone',
                put: false
            }
        }
    },
    methods: {
        /**
         * 克隆表单容器开始
         */
        hadnelCloneContainer(origin) {
            const data = JSON.parse(JSON.stringify(origin))
            data.id = getUuid()
            return data
        }
    }
}
</script>
<style lang="scss" scoped>
.container-group {
    @include box_flex(
        $width: 100%,
        $height: auto,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );
    .list-group {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: row,
            $justify: flex-start,
            $align: flex-start
        );

        padding: 5px;
        > span {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: row,
                $justify: flex-start,
                $align: flex-start,
                $flex-wrap: wrap
            );
            .component-item {
                @include box_flex(
                    $width: calc((100% / 3) - 10px),
                    $height: auto,
                    $direction: row,
                    $justify: center,
                    $align: center
                );

                margin: 5px;
                padding: 5px;
                font-size: $font-mini;
                border-radius: 4px;
                transition: all 0.3s;
                @include border_color($type: solid, $color: 'border-base');
                @include background_color($color: 'cover1');
                .label {
                    margin-left: 10px;
                }
                &:hover {
                    @include border_color($type: dashed, $color: 'primary');
                    @include font_color($color: 'primary');

                    cursor: move;
                }
            }
            .component-item.disabled {
                &:hover {
                    @include border_color($type: solid, $color: 'border-base');
                    @include background_color($color: 'cover1');
                    @include font_color($color: 'text-primary');

                    cursor: not-allowed;
                }
            }
        }
    }
}
</style>
